<template>
  <div :class="{login_background: true}">
<!--    <el-image :src="imageSrc" :style="imageStyle" :title="imageTitle" :class="{border_red:isActive}" @click="toggleChange"></el-image>-->
<!--    <br/><br/><br/>-->
    <div :class="{login_div: true}">
      <div style="padding-bottom: 10px; padding-top: 20px;"><span style="font-size: 35px; color: blue; font-family: '微软雅黑 Light'">管理系统</span></div>

      <el-input v-model="username" placeholder="请输入用户名" style="width: 250px;"></el-input>
      <br><br>
      <el-input placeholder="请输入密码" v-model="password" show-password style="width: 250px;"></el-input>
      <br><br>
      <div style="padding-top: 60px;">
        <el-button @click="login" type="success">登陆</el-button>
        <el-button @click="register" type="success" style="margin-left: 30px;">注册</el-button>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageSrc: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1165671177,3166678250&fm=26&gp=0.jpg",
      imageStyle: "height: 20%; width: 10%;",
      imageTitle: '美景图啊！！！',
      isActive: false,
      icoUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      username: '',
      password: '',
    }
  },

  methods:{
    login: function () {
      if (this.username.trim() === '' || this.password.trim() === '') {
        this.$notify({
          title: '【信息提示】',
          message: '<span style="color: red; ">请填写用户名密码!!!</span>',
          duration: 1500,
          showClose: true,
          dangerouslyUseHTMLString: true
        })
      } else {
        this.$notify({
          title: '获取成功',
          message: '用户名：' + this.username + ", 密码：" + this.password,
          duration: 2500
        });
        window.location.href="http://localhost:50005/#/hello/world";
      }
    },
    register: function() {
      this.$notify({
        title: '跳转到注册页面',
        message: '稍候跳转到注册页面',
        duration: 2500
      });
    },
    toggleChange: function () {
      console.log("点击图片:" + this.isActive);
      this.isActive = !this.isActive;
    },
  }
}
</script>

<style scoped>
  .border_red {
    border: 5px solid red;
  }

  .login_background {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-pack:center;
    -moz-box-pack:center;
    -webkit-box-align:center;
    -moz-box-align:center;

    background: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3667115738,3840043697&fm=26&gp=0.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }

  .login_div {
    /*background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3483249612,3968445611&fm=26&gp=0.jpg") no-repeat;*/
    background-color: #2469ff;
    background-position: center;
    height: 300px;
    margin: 0 auto;
    width: 300px;
    border-radius: 10px;
  }

</style>
